<template>
  <div>
    <app-header title="完形填空"></app-header>

    <!-- 文章内容 -->
    <div class="passage-container">
      <p>
        The study of law has become increasingly popular in recent years. Many students 
        <span class="cloze-blank">{{ answers[0] || '1' }}</span> 
        to pursue a career in law because they see it as a 
        <span class="cloze-blank">{{ answers[1] || '2' }}</span> 
        to make a difference in society.
      </p>
    </div>

    <!-- 选项区域 -->
    <div class="options-container">
      <h6>Question {{ currentQuestion }}</h6>
      <div 
        v-for="option in currentOptions" 
        :key="option.key"
        class="option-item"
        :class="{ selected: selectedOption === option.key }"
        @click="selectOption(option.key)">
        {{ option.key }}. {{ option.text }}
      </div>
    </div>

    <!-- 导航按钮 -->
    <div class="navigation-buttons d-flex justify-content-between">
      <div class="d-flex gap-2">
        <button 
          class="btn btn-outline-secondary"
          :disabled="currentQuestion === 1"
          @click="prevQuestion">
          上一题
        </button>
        <button 
          class="btn btn-outline-secondary"
          :disabled="currentQuestion === totalQuestions"
          @click="nextQuestion">
          下一题
        </button>
      </div>
      <router-link 
        to="/english-cloze-explanation" 
        class="btn btn-primary">
        <i class="bi bi-journal-text"></i>
        答案解析
      </router-link>
    </div>
  </div>
</template>

<script>
import AppHeader from '@/components/common/AppHeader.vue'

export default {
  name: 'EnglishCloze',
  
  components: {
    AppHeader
  },

  data() {
    return {
      currentQuestion: 1,
      totalQuestions: 2,
      selectedOption: null,
      answers: {},
      questions: [
        {
          options: [
            { key: 'A', text: 'choose' },
            { key: 'B', text: 'decide' },
            { key: 'C', text: 'prefer' },
            { key: 'D', text: 'want' }
          ]
        },
        // 其他题目...
      ]
    }
  },

  computed: {
    currentOptions() {
      return this.questions[this.currentQuestion - 1].options
    }
  },

  methods: {
    selectOption(key) {
      this.selectedOption = key
      this.$set(this.answers, this.currentQuestion - 1, key)
    },

    prevQuestion() {
      if (this.currentQuestion > 1) {
        this.currentQuestion--
        this.selectedOption = this.answers[this.currentQuestion - 1]
      }
    },

    nextQuestion() {
      if (this.currentQuestion < this.totalQuestions) {
        this.currentQuestion++
        this.selectedOption = this.answers[this.currentQuestion - 1]
      }
    }
  }
}
</script>

<style scoped>
.passage-container {
  padding: 20px;
  background: white;
  margin: 15px;
  border-radius: 15px;
  line-height: 1.8;
}

.cloze-blank {
  display: inline-block;
  min-width: 60px;
  border-bottom: 2px solid #40e0d0;
  text-align: center;
  margin: 0 5px;
  color: #40e0d0;
}

.options-container {
  margin: 20px 15px;
}

.option-item {
  background: white;
  padding: 15px;
  margin-bottom: 10px;
  border-radius: 10px;
  cursor: pointer;
}

.option-item.selected {
  background: #40e0d0;
  color: white;
}

.navigation-buttons {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 15px;
  background: white;
  box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
}
</style> 